<template>
    <view id="main">
        <view class="content">
            <view class="title fs_18 color_black">标签信息</view>
            <view class="card">
                <view class="tag" :class="'Tag' + currentData.print">
                    {{ currentData.print == '0' ? '待打印' : '已打印' }}
                </view>
                <view class="item flex">
                    <view class="label fs_12">数字识别码</view>
                    <view class="value color_black fs_12">
                        91410600567299509600090004149202407140001
                    </view>
                </view>
                <view class="item flex">
                    <view class="label fs_12">创建时间</view>
                    <view class="value color_black fs_12">
                        261-152-50
                    </view>
                </view>
                <view class="form_item ">
                    <view class="label">
                        <view class="tag">*</view>
                        <view class="text">选择打印机</view>
                    </view>
                    <view @tap="goDYJ" class="handle_box flex">
                        <input value="" placeholder="请选择" disabled placeholder-style="color: #CCCCD3;font-size:14px" />
                        <uni-icons type="right" color="#1D2541" size="20" />
                    </view>
                </view>
            </view>
            <view class="title fs_18 color_black">标签展示</view>
            <view class="card">
                <image class="tag_img" src="@/static/img/tag.png" />
            </view>
            <view class="footer">
                <zy-btn>打印</zy-btn>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
const currentData = reactive({});
onLoad((options: any) => {
    console.log('onLoad', JSON.parse(options.data));
    Object.assign(currentData, JSON.parse(options.data));
});
const goDYJ = () => {
    uni.navigateTo({
        url: '/pages/index/reg/details/choosedyj/choosedyj'
    });
}

</script>

<style lang="scss" scoped>
.content {
    padding: 14px;
    width: 100vw;

    .title {
        margin: 10px 0;
    }

    .card {
        border-radius: 4px;
        margin: 0 0 20px 0;
        position: relative;
        padding: 30px 20px 20px 20px;

        .tag {
            position: absolute;
            border-radius: 6px 0px 6px 0px;
            font-size: 12px;
            top: 0;
            left: 0;
            padding: 4px 10px;
            width: fit-content;
            color: #fff;

            &.Tag0 {
                background: #0077FF;
            }

            &.Tag1 {
                background: #CCD1DE;
            }
        }

        .form_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;

            .label {
                display: flex;
                align-items: center;
                font-size: 13px;
                color: #2e323d;
                white-space: nowrap;
            }

            .handle_box {
                justify-content: space-between;
                width: 70%;
            }
        }

        .item {
            align-items: start;
            border-bottom: 1px solid #eee;
            padding: 16px 0;
            font-size: 14px;

            &:last-child {
                border-bottom: none;
            }

            .label {
                white-space: nowrap;
                width: 30%;
            }

            .value {
                word-break: break-all;
                width: 70%;
            }
        }

        .tag_img {
            width: 100%;
        }
    }

    .footer {
        .zk_btn {
            width: 100%;
        }
    }
}
</style>
